import { computed, ref } from "vue"

export const SHOW_DATA_KEY = 'SHOW_DATA_KEY'

export const showData = ref<boolean>(JSON.parse(localStorage.getItem(SHOW_DATA_KEY)!))
export const useView = () => {
  const toggleShowData = () => {
    showData.value = !showData.value
    localStorage.setItem(SHOW_DATA_KEY, JSON.stringify(showData.value))
  }

  const dataLabel = computed(() => {
    // 模板中使用
    return (data: string | number) => getDataLabel(data)
  })
  const getDataLabel = (data: string | number): string | number => {
    // 函数中使用
    return showData.value ? data : '***'
  }
  return {
    showData,
    dataLabel,
    getDataLabel,
    toggleShowData
  }
}